<template>
  <div id="login">
    <div class="loginBox">
      <div class="auth-form">
        <van-icon name="close"
                  class="closeButton"
                  @click="close" />
        <van-tabs v-model="active"
                  animated>
          <van-tab :title="'帐号登录'">
            <van-form @submit="onSubmit" validate-first>
              <van-field
                  v-model="username"
                  name="username"
                  label="帐号"
                  placeholder="请输入帐号"
                  :rules="[{ required:true, message: '请填写正确的邮箱'}]"
              />
              <van-field
                  v-model="password"
                  type="password"
                  name="password"
                  label="密码"
                  placeholder="请输入密码"
                  :rules="[{ required: true, message: '请填写密码' }]"
              />
              <div style="margin: 16px;">
                <van-button round block :loading="btnLoading" type="info" native-type="submit">登录</van-button>
              </div>
            </van-form>
          </van-tab>

          <van-tab :title="'快速登录'">
            <van-cell-group>
              <van-form @submit="onSubmit" validate-first>
                <van-field
                    v-model="email"
                    name="email"
                    label="邮箱"
                    placeholder="请输入邮箱"
                    :rules="[{ validator:emailValidator, message: '请填写正确的邮箱',}]"
                />
                <van-field
                    v-model="captcha"
                    type="digit"
                    name="captcha"
                    label="验证码"
                    placeholder="验证码"
                    :rules="[{ required: true, message: '请填写验证码' }]"
                >
                  <template #button>
                    <van-button slot="button"
                                size="small"
                                type="primary"
                                :disabled="smsBtn"
                                @click="sendVerifyCode"
                    >
                      {{!smsBtn && '获取验证码' || (time+' s')}}
                    </van-button>

                  </template>
                </van-field>

                <div style="margin: 16px;">
                  <van-button round block :loading="btnLoading" type="info" native-type="submit">登录</van-button>
                </div>
              </van-form>
            </van-cell-group>
          </van-tab>

        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import {getSmsCaptcha,login,fastLogin} from '@/api/system'
import {setJwtToken} from "@/lib/utils/TokenUtil";

export default {
  name: "Login",
  data(){
    return{
      btnLoading:false,
      active:1,
      username:'',
      password:'',
      email:'',
      captcha:'',
      emailPattern:/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/,
      smsCaptchaResult:undefined,
      smsBtn:false,
      time:60,
    }
  },
  methods:{
    emailValidator(val) {
      return this.emailPattern.test(val);
    },
    close () {
      this.$router.back();
    },
    onSubmit(values){
      let submitData = values
      submitData['loginType'] = 1;
      if (this.active===0){
        login(submitData).then(res=>this.handlerSuccess(res))
            .catch(err=>this.handlerFailed(err))
            .finally(() => {
              this.btnLoading = false
            })
      }else if (this.active===1){
        fastLogin(submitData).then(res=>this.handlerSuccess(res))
            .catch(err=>this.handlerFailed(err))
            .finally(() => {
              this.btnLoading = false
            })
      }
      console.log('submit', values);
    },
    handlerSuccess(res){
      setJwtToken(res.data)
      this.$router.back()

    },
    handlerFailed(err){
      this.$toast.fail({
        message:((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
      })
    },
    sendVerifyCode(){
      const state = this
      if (this.email!='') {
        // 4.2 获取短信验证码
        // let result = await getSmsCaptcha(mailMsgVO);
        // console.log(result)
        state.smsBtn = true
        const interval = window.setInterval(() => {
          if (this.time-- <= 0) {
            state.time = 60
            state.smsBtn = false
            window.clearInterval(interval)
          }
        }, 1000)
        let mailMsgVO = {
          recipient: this.email,
          subject: "iMovie登录验证码",
          content: "",
          html: true
        }
        console.log(mailMsgVO)
        getSmsCaptcha(mailMsgVO).then(res => {
          this.$toast(`${res.data}`)
        }).catch(err => {
          clearInterval(interval)
          state.time = 60
          state.smsBtn = false
          this.$toast.fail(err)
        })
      } else {
        this.$toast("请输入邮箱")
      }
    },
  }
}
</script>

<style lang="less" scoped>
#login {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("../../assets/1617860354832.jpeg");
  background-color: #eeeeee;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
  .loginBox {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    opacity: 0.95;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 500;
    .auth-form {
      position: relative;
      padding: 2rem;
      width: 26.5rem;
      max-width: 90%;
      font-size: 1.167rem;
      background-color: #fff;
      border-radius: 8px;
      box-sizing: border-box;
    }
    img {
      position: absolute;
      top: 1rem;
      left: 50%;
      width: 4rem;
      transform: translate(-50%, -70%);
      z-index: 1;
      @media screen and (max-width: 320px) {
        top: 0.5rem;
        transform: translate(-50%, -40%);
        width: 5rem;
      }
    }
    .closeButton {
      position: absolute;
      right: 1rem;
      top: 0.4rem;
    }
    .verificationImage {
      position: absolute;
      right: 0;
      width: 8rem;
      height: 3rem;
      margin-left: 3rem;
    }
    .switchLogin {
      margin-top: 1rem;
      font-size: 0.78rem;
    }
  }
}
.title {
  padding: 0.5rem;
  font-size: 0.5rem;
  color: grey;
}
.agreement {
  // margin-top: 1.667rem;
  line-height: 1rem;
  color: #767676;
  font-size: 0.867rem;
  .agreement-box {
    color: blue;
  }
}
</style>
